@import './base';

body {
   background: #f5f5f5;
}

// 头部导航栏开始
.g-topbar {
   width: 100%;
   height: 70px;
   background-color: #333;
   padding-left: 70px;
   border-bottom: 5px solid #c20c0c;

   .m-top {
      width: 1100px;
      margin: 0 auto;
      height: 100%;

      .g-topbar-log {
         width: 177px;
         height: 69px;
         padding-top: 17px;
         float: left;

         .log {
            width: 100%;
            height: 69px;
            background: url(../images/topbar.png) no-repeat 0 -19px;
            float: left;
         }
      }

      .m-nav {
         width: 508px;
         height: 70px;
         float: left;


         li {
            // width: 84px;
            // height: 70px;
            padding: 0 19px;
            line-height: 65px;
            float: left;

            &:hover {
               background-color: #000000;
            }

            &:last-child {
               position: relative;

               &::after {
                  display: block;
                  width: 28px;
                  height: 19px;
                  content: "";
                  position: absolute;
                  top: 21px;
                  left: 90px;
                  background: url(../images/topbar.png) no-repeat -192px 0;
               }

            }

            a {
               display: block;
               width: 100%;
               height: 100%;
               color: #ccc;
            }
         }
      }

      .g-topbar-search {
         float: left;
         padding-left: 10px;
         margin-top: 19px;
         margin-left: 30px;
         width: 158px;
         height: 32px;
         background-color: #fff;
         border-radius: 32px;
         line-height: 32px;

         span {
            // display:inline block;
            margin-top: 10px;
            width: 18px;
            height: 18px;
            background: url(../images/topbar.png) no-repeat -10px -108px;
            float: left;
         }

         input {
            width: 117px;
            font-size: 12px;
            color: #9b9b9b;
         }
      }

      .g-topbar-ori {
         float: left;
         width: 90px;
         height: 32px;
         margin: 19px 0 0 12px;
         box-sizing: border-box;
         padding-left: 16px;
         border: 1px solid #4F4F4F;
         background-position: 0 -140px;
         line-height: 33px;
         border-radius: 20px;

         &:hover {
            border: 1px solid #fff;

         }

         a {
            color: #ccc;

            &:hover {
               color: #fff;
            }
         }
      }

      .enter {
         margin-top: 30px;
         margin-left: 25px;
         width: 26px;
         height: 16px;
         float: left;

         a {
            color: #787878;
            font-size: 12px;
            display: block;
         }
      }
   }

}

// 头部导航栏结束

.g-bd {
   width: 982px;
   height: 100%;
   padding-left: 16px;
   padding-right: 16px;
   margin: 0 auto;

   .creator-title {
      width: 100%;
      height: 80px;
      font-size: 60px;
      text-align: center;
      line-height: 80px;
      margin-top: 100px;
      margin-bottom: 12px;

      h1 {
         font-weight: 300;
      }
   }

   .creator-subtitle {
      width: 100%;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 14px;
      color: #000000;
      opacity: 0.4;
      margin-bottom: 50px;
   }

   .creator-box-wrap {
      width: 100%;
      height: 223px;

      .all {
         width: 300px;
         height: 223px;
         background-color: #fff;
         float: left;
         padding-top: 35px;
         text-align: center;
         border-radius: 8px;

         img {
            width: 100%;
         }

         h2 {
            margin-bottom: 10px;
            font-size: 26px;
            color: #000;
         }

         p {
            font-size: 16px;
            color: #000000;
            font-weight: 300;
            opacity: 0.6;
         }
      }

      .center {
         margin-left: 24px;
         margin-right: 24px;
      }
   }

   .entry-wrapper {
      width: 100%;
      height: 205px;
      margin-bottom: 110px;

      .all {
         width: 456px;
         height: 106px;
         background-color: #fff;
         margin-top: 24px;
         padding: 0 40px;
         border-radius: 8px;
         float: left;

         &:last-child {
            float: right;
         }

         .left {
            float: left;
            width: 288px;
            margin-top: 28px;

            a {
               font-size: 14px;
               color: #0C73C2;

               span {

                  opacity: 0.8;
                  color: #000000;
               }
            }

            h2 {
               opacity: 0.8;
               font-size: 20px;
               color: #000000;
               text-align: left;
               margin-bottom: 2px;
            }

            p {
               opacity: 0.6;
               font-size: 16px;
               color: #000000;
               font-weight: 300;
            }
         }

         .right {
            text-align: center;
            margin-top: 35px;
            margin-left: 8px;
            float: left;
            border: 1px solid rgba(151, 151, 151, 0.2);
            border-radius: 30px;
            width: 80px;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #000000;
            transition: all 500ms;

            &:hover {
               background-color: #000;
               color: #fff;
            }
         }
      }
   }
}

.g-ft {
   height: 325px;
   overflow: hidden;
   border-top: 1px solid #d3d3d3;
   background: hsl(0, 0%, 95%);


   .m-ft {
      width: 980px;
      margin: 0 auto;

      .f-cd {
         width: 100%;
         height: 71px;
         display: flex;
         justify-content: center;
         margin-top: 33px;

         ul {
            display: flex;
            justify-content: center;

            li {
               width: 100px;
               height: 100%;
               margin-right: 25px;
               text-align: center;

               &:last-child {
                  margin: 0;
               }

               a {
                  display: block;
                  width: 100%;
                  height: 100%;

               }

               .a1 {

                  span {
                     display: block;
                     font: none;
                     width: 45px;
                     height: 45px;
                     margin: 10px auto;
                     background: url(../images/foot_enter_new2.png) no-repeat;
                     background-size: 220px 220px;
                     background-position: -170px -5px;

                     &:hover {

                        background-position: -5px -115px;
                     }
                  }
               }

               .a2 {
                  span {
                     display: block;
                     font: none;
                     width: 45px;
                     height: 45px;
                     margin: 10px auto;
                     background: url(../images/foot_enter_new2.png) no-repeat;
                     background-size: 220px 220px;
                     background-position: -5px -170px;

                     &:hover {

                        background-position: -60px -170px;
                     }
                  }
               }

               .a3 {
                  span {
                     display: block;
                     font: none;
                     width: 45px;
                     height: 45px;
                     margin: 10px auto;
                     background: url(../images/foot_enter_new2.png) no-repeat;
                     background-size: 220px 220px;
                     background-position: -5px -60px;

                     &:hover {
                        background-position: -60px -5px;
                     }
                  }
               }

               .a4 {
                  span {
                     display: block;
                     font: none;
                     width: 45px;
                     height: 45px;
                     margin: 10px auto;
                     background: url(../images/foot_enter_new2.png) no-repeat;
                     background-size: 220px 220px;
                     background-position: -60px -60px;

                     &:hover {
                        background-position: -115px -5px;
                     }
                  }
               }

               .a5 {
                  span {
                     display: block;
                     font: none;
                     width: 45px;
                     height: 45px;
                     margin: 10px auto;
                     background: url(../images/foot_enter_new2.png) no-repeat;
                     background-size: 220px 220px;
                     background-position: -115px -115px;

                     &:hover {
                        background-position: -5px -5px;
                     }
                  }
               }

               .a6 {
                  span {
                     display: block;
                     font: none;
                     width: 45px;
                     height: 45px;
                     margin: 10px auto;
                     background: url(../images/foot_enter_new2.png) no-repeat;
                     background-size: 220px 220px;
                     background-position: -170px -115px;

                     &:hover {
                        background-position: -60px -115px;
                     }
                  }
               }

               .a7 {
                  span {
                     display: block;
                     font: none;
                     width: 45px;
                     height: 45px;
                     margin: 10px auto;
                     background: url(../images/foot_enter_new2.png) no-repeat;
                     background-size: 220px 220px;
                     background-position: -170px -60px;

                     &:hover {
                        background-position: -115px -60px;
                     }
                  }
               }
            }
         }
      }

      .copy {
         width: 100%;
         height: 160px;
         padding-top: 60px;
         text-align: center;

         .p1 {
            a {
               color: #666666;
               font-size: 12px;
            }

            span {
               display: inline-block;
               width: 2px;
               // height: 5px;
               color: #D9D9D9;
               margin: 0 10px;
               margin-bottom: 1px;
            }

         }

         p {
            display: block;
            margin-bottom: 10px;

            a {
               color: #666666;

               &:hover {
                  text-decoration: underline;
               }
            }

            span {
               color: #666666;
            }

            .s1 {
               display: inline-block;
               height: 14px;
               margin: 0 14px;
            }

            .logo {
               display: inline-block;
               width: 14px;
               height: 14px;
               margin-left: 5px;
            }
         }
      }
   }

   .top {
      display: block;
      position: fixed;
      text-indent: -9999px;
      left: 50%;
      margin-left: 500px;
      bottom: 160px;
      width: 49px;
      height: 44px;
      background: url(../images/sprite.png) no-repeat 0 9999px;
      background-position: -265px -47px;

      &:hover {
         background-position: -325px -47px;
      }
   }
}


// 网页底部
.f-updown {
   position: relative;
   position: fixed;
   bottom: -45px;
   width: 100%;
   transition: all 0.3s;

   .locks {
      .lock {
         position: absolute;
         top: -14px;
         right: 15px;
         width: 52px;
         height: 67px;
         background: url(../images/playbar.png) no-repeat 0 -380px;

         a {
            display: block;
            width: 18px;
            height: 18px;
            margin: 6px 0 0 17px;
            background: url(../images/playbar.png) no-repeat -80px -380px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -80px -400px;
            }
         }

         .lockdown {
            background: url(../images/playbar.png) no-repeat -100px -380px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -100px -400px;
            }
         }
      }

      .lock-right {
         position: absolute;
         top: -1px;
         right: 0;
         width: 15px;
         height: 54px;
         background: url(../images/playbar.png) no-repeat -52px -393px;
         pointer-events: none;
      }
   }

   .background {
      height: 53px;
      zoom: 1;
      margin-right: 67px;
      background: url(../images/playbar.png) 0 0;
      background-repeat: repeat-x;
   }

   .hand {
      position: absolute;
      top: -10px;
      z-index: -88;
      width: 100%;
      height: 20px;
      cursor: pointer;
   }

   .f-play-music {
      float: left;
      position: absolute;
      left: 50%;
      top: 6px;
      z-index: 15;
      width: 1100px;
      height: 47px;
      margin: 0 auto;
      margin-left: -490px;

      .btns {
         float: left;
         width: 137px;
         height: 42px;
         padding: 6px 0 0 0;

         a {
            display: block;
            float: left;
            width: 28px;
            height: 28px;
            margin-right: 8px;
            margin-top: 5px;
            text-indent: -9999px;

         }

         .prev {
            background: url(../images/playbar.png) no-repeat 0 -130px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -30px -130px;
            }
         }

         .play {
            width: 36px;
            height: 36px;
            margin-top: 0;
            background: url(../images/playbar.png) no-repeat 0 -204px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -40px -204px;
            }
         }

         .palse {
            background: url(../images/playbar.png) no-repeat 0 -165px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -40px -165px;
            }
         }

         .next {
            background: url(../images/playbar.png) no-repeat -80px -130px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -110px -130px;
            }
         }

      }

      .def-cover {
         float: left;
         position: relative;
         margin: 6px 15px 0 0;

         img {
            height: 34px;
            width: 34px;
         }

         a {
            position: absolute;
            top: 0px;
            left: 0px;
            display: block;
            width: 34px;
            height: 35px;
            background: url(../images/playbar.png) no-repeat 0 -80px;
         }
      }

      .play-process {
         float: left;
         position: relative;
         width: 608px;

         .words {
            height: 28px;
            overflow: hidden;
            color: #e8e8e8;
            text-shadow: 0 1px 0 #171717;
            line-height: 28px;
         }

         .pbar {
            float: left;
            position: relative;
            width: 493px;

            .barbg {
               width: 493px;
               height: 9px;
               background: url(../images/statbar.png) no-repeat right 0;

               .ready {
                  width: 0;
                  height: 9px;
                  border-radius: 9px;
                  background-color: red;

                  .curser {

                     position: absolute;
                     top: 0;
                     left: 0;
                     height: 9px;
                     background: url(../images/playlist.png) no-repeat left -66px;

                     .btn {
                        position: absolute;
                        top: -7px;
                        right: -13px;
                        width: 22px;
                        height: 24px;
                        margin-left: -11px;
                        background: url(../images/iconall.png) no-repeat 0 -250px;

                        &:hover {
                           background: url(../images/iconall.png) no-repeat 0 -280px;
                        }
                     }
                  }
               }
            }

         }
      }

      .time {
         position: absolute;
         top: -3px;
         right: -84px;
         color: #797979;
         text-shadow: 0 1px 0 #121212;

         em {
            color: #a1a1a1;
            font-style: normal;
            text-align: left;
            font-size: inherit;
         }
      }

      .operations {
         float: left;
         width: 87px;

         .icn {
            display: block;
            float: left;
            width: 25px;
            height: 25px;
            margin: 11px 2px 0 0;
            text-indent: -9999px;
         }

         .icn-pip {
            position: relative;
            background: url(../images/pip.jpg) no-repeat 0 0;

            &:hover {
               background: url(../images/pip.jpg) no-repeat 0 -25px;
            }
         }

         .icn-add {
            background: url(../images/playbar.png) no-repeat -88px -163px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -88px -189px;
            }
         }

         .icn-share {
            background: url(../images/playbar.png) no-repeat -114px -163px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -114px -189px;
            }
         }
      }

      .controls {
         float: left;
         position: relative;
         z-index: 10;
         width: 126px;
         height: 36px;
         padding-left: 13px;
         background: url(../images/playbar.png) no-repeat -147px -238px;

         .icn {
            float: left;
            width: 25px;
            height: 25px;
            margin: 11px 2px 0 0;
            text-indent: -9999px;
         }

         .volume {
            background: url(../images/playbar.png) no-repeat -2px -248px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -31px -248px;
            }
         }

         .m-vol {
            display: none;
            position: absolute;
            top: -113px;
            left: 9px;
            clear: both;
            width: 32px;
            height: 113px;

            .barbg {
               position: absolute;
               top: 0;
               left: 0;
               width: 32px;
               height: 113px;
               background: url(../images/playbar.png) no-repeat 0 -503px;
            }

            .vbg {
               position: absolute;
               top: 0;
               left: 14px;
               width: 4px;
               height: 113px;
               padding: 4px 0;

               .curr {
                  position: absolute;
                  bottom: 10px;
                  left: 0;
                  width: 4px;
                  height: 0;
                  border-radius: 4px;
                  background-color: red;

                  .btn {
                     position: absolute;
                     top: -5px;
                     left: -7px;
                     display: block;
                     width: 18px;
                     height: 20px;
                     background: url(../images/iconall.png) no-repeat -40px -250px;
                     cursor: pointer;
                  }
               }

            }
         }

         .mode {
            background: url(../images/playbar.png) no-repeat -66px -248px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -93px -248px;
            }
         }

         .mode1 {
            background: url(../images/playbar.png) no-repeat -66px -344px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -93px -344px;
            }
         }

         .mode2 {
            background: url(../images/playbar.png) no-repeat -3px -344px;

            &:hover {
               background: url(../images/playbar.png) no-repeat -33px -344px;
            }
         }

         .modetip {
            display: none;
            position: absolute;
            top: -35px;
            left: 12px;
            width: 81px;
            height: 39px;
            position: absolute;
            clear: both;
            background: url(../images/playbar.png) no-repeat 0 -457px;
            color: #fff;
            line-height: 34px;
            text-align: center;
         }
      }

      .add {
         float: left;
         width: 59px;
         height: 36px;

         .icn {
            float: left;
            width: 25px;
            height: 25px;
            margin: 11px 2px 0 0;
            text-indent: -9999px;
         }

         .list {
            display: block;
            float: left;
            width: 60px;
            padding-left: 21px;
            background: url(../images/playbar.png) no-repeat -42px -68px;
            line-height: 27px;
            text-align: center;
            color: #666;
            text-shadow: 0 1px 0 #080707;
            text-indent: 0;
            text-decoration: none;

            &:hover {
               background: url(../images/playbar.png) no-repeat -42px -98px;
            }
         }
      }

      .f-playlist {
         display: none;
         position: absolute;
         left: 50%;
         bottom: 36px;
         z-index: -99;
         width: 986px;
         height: 301px;
         margin-left: -900px;
         border-radius: 6px 6px 0 0;
         background-color: #161616;
         box-shadow: 3px -3px 2px 2px #000;

         .listhd {
            position: relative;
            height: 40px;
            border-bottom: 2px solid #000;

            h4 {
               position: absolute;
               left: 25px;
               top: 0;
               height: 39px;
               line-height: 39px;
               font-size: 14px;
               color: #e2e2e2;
            }

            .addall {
               position: absolute;
               left: 398px;
               top: 12px;
               height: 15px;
               color: #ccc;
               line-height: 15px;
               cursor: pointer;

               span {
                  float: left;
                  height: 16px;
                  width: 16px;
                  margin: 1px 6px 0 0;
                  background: url(../images/playlist.png) no-repeat -24px 0;
               }
            }

            .line {
               position: absolute;
               top: 13px;
               left: 477px;
               height: 15px;
               border-left: 1px solid #000;
               border-right: 1px solid #2c2c2c;
            }

            .clear {
               position: absolute;
               left: 490px;
               top: 12px;
               height: 15px;
               color: #ccc;
               line-height: 15px;
               cursor: pointer;

               span {
                  float: left;
                  width: 13px;
                  height: 16px;
                  margin: 1px 6px 0 0;
                  background: url(../images/playlist.png) no-repeat -51px 0;
               }
            }

            .f-close {
               position: absolute;
               top: 6px;
               right: 8px;
               width: 30px;
               height: 30px;
               overflow: hidden;
               text-indent: -999px;
               cursor: pointer;
               background: url(../images/playlist.png) no-repeat -195px 9px;
            }
         }

         .listbd {
            position: absolute;
            left: 0;
            top: 41px;
            width: 976px;
            height: 260px;
            padding: 0 5px;
            overflow: hidden;
            background: url(../images/playlist.png) -1014px 0;
            background-repeat: repeat-y;

            .listmsk {
               position: absolute;
               left: 2px;
               top: 0;
               z-index: 4;
               height: 260px;
               width: 553px;
               overflow: hidden;

               .msk {
                  padding-top: 85px;
                  text-align: center;
                  line-height: 43px;
                  color: #aaa;

                  i {
                     float: none;
                     display: inline-block;
                     position: relative;
                     top: -4px;
                     width: 36px;
                     height: 29px;
                     margin-right: 3px;
                     background: url(../images/playlist.png) no-repeat -138px 0;
                     vertical-align: middle;
                  }
               }
            }

            .bline {
               position: absolute;
               left: 555px;
               top: -1px;
               z-index: 2;
               width: 6px;
               height: 260px;
               background: #000;
               opacity: .5;
            }

            .ask {
               position: absolute;
               right: 25px;
               top: 12px;
               cursor: pointer;
               z-index: 5;

               a {
                  display: inline-block;
                  width: 21px;
                  height: 21px;
                  background: url(../images/playlist.png) no-repeat 0 -50px;
                  text-indent: 0;
               }
            }
         }
      }
   }

}